<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col :span="22">
            <el-form :inline="true" class="input-flex">
              <el-form-item label-width="70px" label="关键字">
                <el-input
                  v-model="title"
                  placeholder="根据文章标题搜索"
                  class="el-input-inp"
                >
                </el-input>
              </el-form-item>
              <el-form-item label-width="70px" label="状态">
                <el-select
                  size="small"
                  v-model="selectValue"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="hClear">清除</el-button>
                <el-button size="small" type="primary" @click="hSearch"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="2">
            <el-button
              @click="hSkill('add')"
              class="small"
              type="success"
              icon="el-icon-edit"
              >新增技巧</el-button
            >
          </el-col>
        </el-row>
        <el-alert
          style="margin-bottom: 20px"
          :title="`数据一共${total}条`"
          :closable="false"
          type="info"
          show-icon
        />
        <el-table
          :data="list"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          stripe
          width="100%"
        >
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="title" label="文章标题"> </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column label="录入时间">
            <template #default="{ row }">
              {{ FormatDateTime(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{ row.state ? "已启用" : "已禁用" }}
            </template>
          </el-table-column>

          <el-table-column width="200px" prop="" label="操作">
            <template slot-scope="{ row }">
              <el-button
                style="margin-right: 10px"
                @click="hPreview(row)"
                type="text"
                >预览</el-button
              >
              <drawer :isPreview.sync="isPreview" :info="info"></drawer>
              <el-button type="text" @click="forbidden(row)">
                {{ row.state === 1 ? "禁用" : "启用" }}
              </el-button>
              <el-button
                type="text"
                @click="hSkill('edit', row.id)"
                :disabled="row.state === 1 ? true : false"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="hDel(row)"
                :disabled="row.state === 1 ? true : false"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="hSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="queryObj.page"
          :page-sizes="[10, 15, 18]"
          :page-size="10"
          layout="->, prev, pager, next,sizes ,jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
      <skill
        ref="name"
        :isSkill.sync="isSkill"
        :is-edit="isEdit"
        :cur-node-id="curNodeId"
        @updateManager="loadSurface"
      />
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, changeState, remove } from '@/api/hmmm/articles'
import drawer from './drawer.vue'
import skill from './skill.vue'
export default {
  components: { drawer, skill },
  data () {
    return {
      curNodeId: '',
      isEdit: false, // 编辑还是添加
      isSkill: false,
      isPreview: false,
      // title: '', // 文章名
      // selectValue: '', // 选择器
      list: [],
      total: 0,
      title: '', // 文章名
      // keyword: '',
      selectValue: '', // 选择器
      options: [
        { value: 0, label: '禁用' },
        { value: 1, label: '启用' }
      ],
      queryObj: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      info: ''
    }
  },
  created () {
    this.loadSurface()
  },
  methods: {
    // // 预览文章
    hPreview (row) {
      console.log(row)
      this.info = row
      this.isPreview = true
    },
    // 数据渲染
    async loadSurface () {
      const res = await list(this.queryObj)
      console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
      console.log(this.list)
    },

    // 格式化时间
    FormatDateTime (t) {
      return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点击每页显示几条数据
    hSizeChange (pages) {
      this.queryObj.page = 1
      this.queryObj.pagesize = pages
      this.loadSurface()
    },
    // 点击页码显示下一条数据
    handleCurrentChange (page) {
      this.queryObj.page = page
      this.loadSurface()
    },
    // 切换目录状态
    async forbidden (row) {
      row.state === 1 ? (row.state = 0) : (row.state = 1)
      await changeState(row)
      this.$message.success('操作成功')
    },
    // 删除
    async hDel (row) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.loadSurface()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 新增&&修改
    hSkill (type, id) {
      if (type === 'add') {
        this.isSkill = true
        this.isEdit = false
        console.log(type, id)
      } else {
        this.curNodeId = id
        console.log(this.curNodeId)
        this.$nextTick(() => {
          this.$refs.name.getinfo()
        })
        this.isSkill = true
        this.isEdit = true
      }
    },
    // 搜索
    hSearch () {
      if (this.title === '' && this.selectValue === '') { return this.loadSurface() }
      this.queryObj.keyword = this.title
      this.queryObj.state = this.selectValue
      this.loadSurface()
    },
    hClear () {
      this.title = ''
      this.selectValue = ''
      // 移除属性
      delete this.queryObj.keyword
      delete this.queryObj.state
      this.loadSurface()
    }
  }
}
</script>

<style scoped>
</style>
